<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>短信模板</title>
    <link rel="shortcut icon" href="favicon.ico"> <link href="<%=path%>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
<link href="<%=path%>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
<link href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
<link href="<%=path%>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="<%=path%>/hplus/css/plugins/footable/footable.core.css" rel="stylesheet">
 <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/dataTables/css/jquery.dataTables.min.css"/>
<link href="<%=path%>/hplus/css/animate.min.css" rel="stylesheet">
<link href="<%=path%>/hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet">
<link href="<%=path%>/hplus/css/plugins/clockpicker/clockpicker.css" rel="stylesheet">
<link href="<%=path%>/hplus/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.css">

    <style> 
     .caoZuo{font-size: 15px;margin: 0 4px;color:#1ab394}
        table.dataTable tbody th, table.dataTable tbody td{
        padding:0;
        }
        .col-sm-1{
            font-weight: normal;
        }  
        table.dataTable tbody th, table.dataTable tbody td{
        padding:10;
        }  
        
          
    </style>
</head>

<body class="gray-bg">
  <div class="container-fluid">
	<div class="row">
      <div class="tabs-container">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">我的模板</a>
                </li>
              <!--   <li class="" hidden=""><a hidden="" data-toggle="tab" href="#tab-2" aria-expanded="false">系统模板</a>
                </li> -->
            </ul>
            <div class="tab-content">
                 <div id="tab-1" class="tab-pane active">
                     <div class="panel-body">
				          <div class="col-md-12 ibox-content">
				            <form class="form-horizontal">
				                <div class="col-sm-3">
				                    <div class="input-group">
				                        <input id="keyWord" type="text" placeholder="输入关键字" class="input form-control">
				                        <span class="input-group-btn">
				                            <button onclick="javascript:search();" type="button" class="btn btn btn-primary"> <i class="fa fa-search"></i> 搜索</button>
				                        </span>
				                    </div>
				                </div>
				
				                <label class="col-sm-2 control-label">模板类型</label>
				                <div class="col-sm-2">
				                   <select id="select_type" class="form-control" name="account" onchange="typeChange()">
				                        <option value="">全部</option>
				                        <option value="sales_service">售后服务</option>
				                        <option value="smart_market">智能营销</option>
				                    </select>
				                </div>                  
				           
				              
				            </form>
				             <div class="col-sm-12" style="margin-top:20px;">
				                <div class="ibox float-e-margins">
				                    <div class="table-responsive">
				                        <table class="display  table-striped table-bordered table-hover" id="mydataTable">
				                            <thead>
				                                <tr>
				                                    <th>选择</th>
				                                    <th>模板名称</th>
				                                    <th>模板内容</th>
				                                </tr>
				                            </thead>
				                            <tbody>
				                               
				                            </tbody>
				                        </table>
				                    </div>                 
				                </div>
				            </div>
				             <div class="col-md-12 text-center" style="margin-top:-10px;width:816px;">
						        <div class="col-md-3"></div>
						        <button type="button" onclick="javascript:colseModelModal();" class="col-md-2 btn btn-w-m btn-outline btn-primary">取消</button> 
						        <div class="col-md-2"></div>
							    <button type="button" onclick="javascript:determineModel();" class="col-md-2 btn btn-w-m btn-primary">确定</button> 
							    <div class="col-md-3"></div>
						    </div>
				        </div>      
                     </div>
                 </div>
                 <div id="tab-2" class="tab-pane">
                    <div class="panel-body"></div>
                    <div class="col-md-12 text-center" style="margin-top:-10px;width:816px;">
				        <div class="col-md-3"></div>
				        <button type="button" onclick="javascript:colseCouponModal();" class="col-md-2 btn btn-w-m btn-outline btn-primary">取消</button> 
				        <div class="col-md-2"></div>
					    <button type="button" onclick="javascript:determineCoupon();" class="col-md-2 btn btn-w-m btn-primary">确定</button> 
					    <div class="col-md-3"></div>
				    </div>
                 </div>
                
            </div>
          </div>
          
        </div>
      
    </div>
    <script src="<%=path%>/hplus/js/plugins/chosen/chosen.jquery.js"></script>
    <script src="<%=path%>/hplus/js/plugins/jsKnob/jquery.knob.js"></script>
    <script src="<%=path%>/hplus/js/plugins/jasny/jasny-bootstrap.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/datapicker/bootstrap-datepicker.js"></script>
    
    <script src="<%=path%>/hplus/js/plugins/prettyfile/bootstrap-prettyfile.js"></script>
    <script src="<%=path%>/hplus/js/plugins/switchery/switchery.js"></script>
    <script src="<%=path%>/hplus/js/plugins/ionRangeSlider/ion.rangeSlider.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="<%=path%>/hplus/js/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/clockpicker/clockpicker.js"></script>
    <script src="<%=path%>/hplus/js/plugins/cropper/cropper.min.js"></script>
    <script type="text/javascript" src="<%=path%>/hplus/js/plugins/dataTables/jquery.dataTables.min.js"></script>
    <script src="<%=path%>/hplus/js/demo/form-advanced-demo.min.js"></script>
	<script src="<%=path%>/hplus/js/plugins/suggest/bootstrap-suggest.min.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/public.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/lengthlimit.js"></script>
    <script src="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.js"></script>

<script type="text/javascript" src="<%=path%>/js/marketing/dialog.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/public.js"></script>
	   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
	<script type="text/javascript">
		$(document).on('ifChecked', '.select_one', function() {
			$(".childCheckbox1").parent().removeClass("checked");
			$(".childCheckbox1").removeAttr("checked");
			$(this.id).children().addClass("checked");
		});
   </script>
	
    <script>
	    var path = "<%=path%>";
	    var myDataTable;
	    var access_token=$.cookie('access_token');
	   	var cid=$.cookie('cid');
	   	var uid=$.cookie('uid');
	   	var id;
	   	var keyWord="";
	   	var modelType1;
	   	$.fn.dataTable.ext.errMode = 'none';
        $(function(){
        	 console.log(window.location);
        	init();
        	
        });
        function init(){
        	id=getQueryString("id");
        	
        	myDataTable = dataTable();
        	
        }
        
        function search(){
        	keyWord=$('#keyWord').val();
        	func_dataTableReload();
        }
        function typeChange(){
        	modelType1=$("#select_type  option:selected").val();
        	func_dataTableReload();
        }
        
        function func_dataTableReload(){
        	myDataTable.ajax.reload(function(){
        		$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green"});
        		$('input').iCheck('uncheck');
        	});
        }
        
        
        function dataTable(){
        	return $('#mydataTable').DataTable({
        		processing: true,
        		ordering: false,
        		searching: false,
        		info: true,
        		autoWidth: true,
        		lengthChange: false,
        		"order": [[ 2, "desc" ]],
        	    language: {
        	    	emptyTable: '<div id="content_empty"  class="form-group white-bg" style="text-align:center;padding:200px 0;margin:0;">   <p>暂无此类型短信模板</p></div>',
        	    	info: '从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录',
        			infoEmpty: '没有数据',
        			lengthMenu: '每页显示 _MENU_ 条记录',
        			loadingRecords: '正在加载数据....',
        			processing: '正在处理数据....',
        			zeroRecords: '没有找到匹配的记录',
        			paginate: {
        				first: '首页',
        				previous: '前页',
        				next: '后页',
        				last: '尾页'
        			}
        	    },
        	    order: [[1,'desc']],
        		pageLength: 5,
        	    pagingType: 'full_numbers',
        	    columnDefs: [{
        			render: function(data, type, full) {
                        
        				var result="";
	    				if(data==modelId){
	    					result='<div class="checkbox i-checks"><label class="is_checkd select_one"><input checked="checked" class="childCheckbox1" type="checkbox" modelContent="'+full.content+'" id="'+data+'"></label></div>';

	    				}else{
	    					 result='<div class="checkbox i-checks"><label class="is_checkd select_one"><input  class="childCheckbox1" type="checkbox" modelContent="'+full.content+'" id="'+data+'"></label></div>';
	    				}
	                    return result;
                    },
        			targets: 0
        		},{
        			render: function(data, type, full) {
        				return '<div style="width:400px;word-wrap:break-word;" >'+handleModelContent(data)+'</div>';
                    },
        			targets: 2
        		}],
        	    columns: func_columns(),
        	    serverSide: true,
        	    ajax: {
        	    	contentType: 'text/plain;charset=utf-8',
        	    	type: 'POST',
        	    	url: func_AjaxUrl(),
        	    	data: function(d){
        	    		d.id=id;
        	    		d.keyWord=keyWord;
        	    		d.type=modelType1;
        				return JSON.stringify(d);
        			}
        		}
        	    ,
	    	    "initComplete": function(settings, json) {
	    	    	$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",});
	    	      }
	    	}).on( 'draw', function () {
	    		$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",});

	    	} );
	    }
        
        
        
        
        
        function func_AjaxUrl(){
        	return path+"/smsModel/getList";
        }
        /**
         *	设置列名，对应后台
         */
        function func_columns(){
        	var jsonArr = [
        		{"data":"id"},
        		{"data":"name"},
        		{"data":"content"},
        		
        	];
        	return jsonArr;
        }
        
        
        function handleModelContent(content){
    		// content = content.replace("[autograph]", "【" + autograph + "】");
    		content = content.replace("[customerName]", " 会员名称 ");
        		content = content.replace("[tradeName]", " 商品名称 ");
        		content = content.replace("[tradeExplain]", "商品说明");
        		content = content.replace("[tradeNum]",  "购买数量");
        		content = content.replace("[buyTime]", "购买时间");
        		content = content.replace("[buyNum]",  "购买数量");
        		content = content.replace("[attributeUrl]", " 属性链接 ");
        		content = content.replace("[appraiseUrl]", " 评价链接 ");
        		content = content.replace("[explainUrl]", " 说明链接 ");
        		content = content.replace("[couponCode]", " 优惠券码 ");
        		content = content.replace("[NameAndNum]", "名称和数量");
    		return content;
        }
        
        
        
    </script>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
</body>
</html>
